<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false" %>
    <%@ taglib  uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="" />
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //Custom Theme files -->
    <link href="../assets/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="../assets/css/style.css" type="text/css" rel="stylesheet" media="all">
    <!-- js -->
    <script src="../assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap-3.1.1.min.js"></script>
    <!-- //js -->
    <!-- cart -->
    <script src="../assets/js/simpleCart.min.js"> </script>
    <!-- cart -->
</head>
<body>
<!--header-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a  href="/index">Love Cake</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li id="classificationDetail"><a href="/index" class="active">首页</a></li>
                    

                    
                </ul>
            </div>
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form">
                        <input type="text" class="form-control">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                            搜
                        </button>
                    </form>
                </div>
            </div>
            <div class="header-right login">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <div id="loginBox">
                    <form id="loginForm">
                        <fieldset id="body">
                            <fieldset>
                                <label for="email">Email</label>
                                <input type="text" name="email" id="email">
                            </fieldset>
                            <fieldset>
                                <label for="password">Password</label>
                                <input type="password" name="password" id="password">
                            </fieldset>
                            <input type="submit" id="login" value="登录">
                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住</i></label>
                        </fieldset>
                        <p>新用户 ? <a class="sign" href="#">注册</a><span><a href="#">忘记密码?</a></span></p>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                <div class="cart-box">
                    <h4><a href="#">
                        <span class="simpleCart_total"> $0.00 </span> (<span id="simpleCart_quantity" class="simpleCart_quantity"> 0 </span>)
                    </a></h4>
                    <p><a href="#" class="simpleCart_empty">空</a></p>
                    <div class="clearfix"> </div>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--//header-->
<!--gallery-->
<div class="gallery">
    <div class="container">
        <div class="gallery-grids">
            <div class="col-md-4 gallery-grid ">
                <img src="${cakeInfo.picUrl }" class="img-responsive" alt=""/>
            </div>
            <div class="col-md-8 gallery-grid">
                <div class="galy-info">
                    <h1>${cakeInfo.cakeName }</h1>
                    <h5 class="item_price">$${cakeInfo.price }</h5>
                </div>
                <p class="detail_attr"><strong>尺寸&nbsp;:&nbsp;</strong>${cakeInfo.size }寸</p>
                <p class="detail_attr"><strong>重量&nbsp;:&nbsp;</strong>${cakeInfo.weight }镑</p>
                <p class="detail_attr">
                    <strong>甜度&nbsp;:&nbsp;</strong>
                    <span class="detail_xing">
                        
						
							<c:if test="${cakeInfo.sweetness == '1'}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							</c:if>
							<c:if test="${cakeInfo.sweetness == '2'}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							</c:if>
							<c:if test="${cakeInfo.sweetness == '3'}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							</c:if>
							<c:if test="${cakeInfo.sweetness == 4}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							</c:if>
							<c:if test="${cakeInfo.sweetness == '5'}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							</c:if>
							<c:if test="${cakeInfo.sweetness == '6'}">
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							<span class="glyphicon glyphicon-star"></span>
							</c:if>
						
                            <!-- <span class="glyphicon glyphicon-star"></span>
                            
                        
                            <span class="glyphicon glyphicon-star"></span>
                            
                        
                            <span class="glyphicon glyphicon-star"></span>
                            
                        
                            
                            <span class="glyphicon glyphicon-star-empty"></span>
                        
                            
                            <span class="glyphicon glyphicon-star-empty"></span> -->
                        
                    </span>
                </p>
                <p class="detail_attr"><strong>口味&nbsp;:&nbsp;</strong>${cakeInfo.taste }</p>
                <p class="detail_attr"><strong>适应场合&nbsp;:&nbsp;</strong>${cakeInfo.cakeType }</p>
                <p class="detail_attr"><strong>原材料&nbsp;:&nbsp;</strong>${cakeInfo.ingredient }</p>
            </div>
        </div>
    </div>
</div>
<!--//gallery-->

<!--subscribe-->
<div class="subscribe">
    <div class="container">
        <h3>Newsletter</h3>
        <form>
            <input type="text" class="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}">
            <input type="submit" value="Subscribe">
        </form>
    </div>
</div>
<!--//subscribe-->
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>company</h4>
                <ul>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Work Here</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Happenings</a></li>
                    <li><a href="#">Dealer Locator</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>service</h4>
                <ul>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Warranty</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="/user/login" target="_blank">Admin Login</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>order & returns</h4>
                <ul>
                    <li><a href="#">Order Status</a></li>
                    <li><a href="#">Shipping Policy</a></li>
                    <li><a href="#">Return Policy</a></li>
                    <li><a href="#">Digital Gift Card</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>legal</h4>
                <ul>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms and Conditions</a></li>
                    <li><a href="#">Social Responsibility</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--//footer-->
<div class="footer-bottom">
    <div class="container">
        <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
    </div>
</div>
</body>
<script type="text/javascript" src="../assets/static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">


		$.ajax({
			async:true,
			url:"/indexClassification",
			type:"post",
			data:{},
			dataType:"json",
			success:function(data) {
			    console.log(data.result[0]);
				var arr1 = new Array();
				var arr2 = new Array();
				var arr3 = new Array();
				
				for(var i=0;i<data.result.length;i++) {
					if(data.result[i].levelId == 1 && data.result[i].parentId == 0) {
						arr1.push(data.result[i]);
					}
					if(data.result[i].levelId == 2) {
						arr2.push(data.result[i]);
					}
					if(data.result[i].levelId == 3) {
						arr3.push(data.result[i]);
					}
				}
				console.log(arr1);
				console.log(arr2);
				console.log(arr3);

				for(var i=0;i<arr1.length;i++) {
					var cId = arr1[i].id;
					var str = "<li class='dropdown'>";
					str += "<a href='#' class='dropdown-toggle' data-toggle='dropdown'>"+arr1[i].catalogName+"<b class='caret'></b></a>";
					str += "<ul class='dropdown-menu multi-column columns-4'>";
					str += "<div class='row' id='"+cId+"'></div></ul></li>";
					$('#classificationDetail').after(str);
					for(var j=0;j<arr2.length;j++) {
						var cId2 = arr2[j].id;
						if(arr2[j].parentId == cId) {
							var str2 = "<div class='col-sm-3'>";
							str2 += "<h4 id='"+cId2+"'>"+arr2[j].catalogName+"</h4></div>";
							$("#"+cId).append(str2);
							for(var k=0;k<arr3.length;k++) {
								if(arr3[k].parentId == cId2) {
									var str3 = "<ul class='multi-column-dropdown'>";
									str3 += "<li><a class='list' href='/list?cid="+arr3[k].id+"'>"+arr3[k].catalogName+"</a></li></ul>";
									$("#"+cId2).append(str3);
								}
							}
						}
						
					}
				}

				
			}
		}) 

</script>
</html>